<template>
  <div>
    <Modal :mask-closable="false" :title="titleString" v-model="modelShow" width="800">
      <div>
        <Spin size="large" fix v-if="spinShow"></Spin>
        <Tabs  name="div2" v-model="tabname" size="small">
          <TabPane :index="1" label="基础信息" name="JiChu" @on-click="tabsClick" tab="div2">
            <div :style="{ height: divHeight2 }" style="overflow-y: auto; margin-top: 10px">
              <row style="margin-top: 2px">
                <Col span="8" class="ivu-mb-8 ivu-pl-8">
                  <div class="itemDiv" style="margin-top: 5px">
                    <img
                      src="../../assets/iconFont/头像.png"
                      style="height: 20px; width: 25px; margin-bottom: 5px"
                    />
                    <span
                      class="text1"
                      :title="`看台员工：挡车工-${attrbuteObj.empScanDetail}`"
                      style="font-size: 16px"
                      >看台员工：挡车工-{{ attrbuteObj.empScanDetail }}</span
                    >
                  </div>
                </Col>
                <Col span="8" class="ivu-mb-8 ivu-pl-8">
                  <div class="itemDiv" style="display: flex; flex-direction: row; margin-top: 5px">
                    <img
                      src="../../assets/iconFont/生产状态.png"
                      style="height: 20px; width: 20px; margin-bottom: 5px; margin-right: 2px"
                    />
                    <span
                      class="text2"
                      :title="`生产状态：${attrbuteObj.productState}`"
                      style="display: inline-block; font-size: 16px"
                    >
                      生产状态：</span
                    >
                    <div style="display: inline">
                      <Tag
                        style="margin-top: 0px; margin-right: 15px"
                        :color="zhuanTai.color(attrbuteObj.stateCode)"
                      >
                        {{ zhuanTai.text(attrbuteObj.stateCode, '织机') }}
                      </Tag>
                    </div>
                  </div>
                </Col>
                <Col span="8" class="ivu-mb-8 ivu-pl-8">
                  <div class="itemDiv">
                    <img
                      src="../../assets/iconFont/累计电量.png"
                      style="height: 20px; width: 25px; margin-bottom: 5px; margin-right: 3px"
                    />
                    <span
                      class="text1"
                      :title="`效率：${attrbuteObj.runEfc}`"
                      style="font-size: 16px"
                      >效率：{{ attrbuteObj.runEfc }}</span
                    >
                  </div>
                </Col>
                <Col span="8">
                  <div class="itemDiv">
                    <img
                      src="../../assets/iconFont/品种联动.png"
                      style="height: 20px; width: 25px; margin-bottom: 5px; margin-left: 5px"
                    />
                    <span
                      class="text1"
                      :title="`品种：${attrbuteObj.materialName}`"
                      style="font-size: 16px"
                      >品种：{{ attrbuteObj.materialName }}</span
                    >
                  </div>
                </Col>
                <Col span="8" class="ivu-mb-8 ivu-pl-8">
                  <div class="itemDiv">
                    <img
                      src="../../assets/iconFont/产量.png"
                      style="height: 20px; width: 20px; margin-bottom: 5px; margin-right: 2px"
                    />
                    <span style="display: inline-block; font-size: 16px">
                      纬密：{{ attrbuteObj.latitudeDensity }}</span
                    >
                  </div>
                </Col>
                <Col span="8" class="ivu-mb-8 ivu-pl-8">
                  <div class="itemDiv">
                    <img
                      src="../../assets/iconFont/产量查询.png"
                      style="height: 20px; width: 20px; margin-bottom: 5px; margin-right: 2px"
                    />
                    <span
                      class="text1"
                      :title="`织布长度：${attrbuteObj.loomLength}`"
                      style="display: inline-block; font-size: 16px"
                    >
                      织布长度：{{ attrbuteObj.loomLength }}</span
                    >
                  </div>
                </Col>
                <Col span="8" class="ivu-mb-8 ivu-pl-8">
                  <div class="itemDiv">
                    <img
                      src="../../assets/iconFont/效率 (1).png"
                      style="height: 20px; width: 20px; margin-bottom: 5px; margin-right: 2px"
                    />
                    <span
                      class="text1"
                      :title="`打纬速度：${attrbuteObj.beatLatitudeSpeed}`"
                      style="display: inline-block; font-size: 16px"
                    >
                      打纬速度：{{ attrbuteObj.beatLatitudeSpeed }}</span
                    >
                  </div>
                </Col>
                <Col span="8" class="ivu-mb-8 ivu-pl-8">
                  <!--                               细纱特有字段 -->
                  <div class="itemDiv">
                    <img
                      src="../../assets/iconFont/线圈.png"
                      style="height: 20px; width: 20px; margin-bottom: 5px; margin-right: 2px"
                    />
                    <span
                      class="text1"
                      :title="`经停次数：${attrbuteObj.longitudeStopNum}`"
                      style="display: inline-block; font-size: 16px"
                    >
                      经停次数：{{ attrbuteObj.longitudeStopNum }}</span
                    >
                  </div>
                </Col>
                <Col span="8" class="ivu-mb-8 ivu-pl-8">
                  <div class="itemDiv">
                    <img
                      src="../../assets/iconFont/线圈 (1).png"
                      style="height: 20px; width: 20px; margin-bottom: 5px; margin-right: 2px"
                    />
                    <span
                      class="text1"
                      :title="`纬停次数：${attrbuteObj.latitudeStopNum}`"
                      style="display: inline-block; font-size: 16px"
                    >
                      纬停次数：{{ attrbuteObj.latitudeStopNum }}</span
                    >
                  </div>
                </Col>
                <Col flex="auto" class="ivu-mb-8 ivu-pl-8">
                  <div class="itemDiv">
                    <img
                      src="../../assets/iconFont/时间.png"
                      style="height: 20px; width: 20px; margin-bottom: 5px; margin-right: 2px"
                    />
                    <span
                      class="text1"
                      :title="`更新时间：${attrbuteObj.recordTime}`"
                      style="display: inline-block; font-size: 16px"
                    >
                      更新时间：{{ attrbuteObj.recordTime }}</span
                    >
                  </div>
                </Col>
              </row>
            </div>
          </TabPane>
          <TabPane :index="2" label="实时状态" name="realtime" tab="div2">
            <div style="overflow-y: auto; height: 45vh; margin-top: 10px">
              <row>
                <Col span="8" v-for="(item, index) in realtime" :key="index">
                  <div class="itemDiv">
                    <div
                      class="text1Div"
                      :title="item.key + ':' + item.value"
                      style="font-size: 16px; margin-left: 5px"
                      >{{ item.key }}:
                    </div>
                    <div
                      class="text4"
                      :title="item.key + ':' + item.value"
                      style="font-size: 16px; margin-left: 5px"
                    >
                      {{ item.value }}
                    </div>
                  </div>
                </Col>
              </row>
            </div>
          </TabPane>
          <TabPane :index="3" label="故障信号" name="warning" tab="div2">
            <div style="overflow-y: auto; height: 45vh; margin-top: 10px">
              <row>
                <Col span="8" v-for="(item, index) in warning" :key="index">
                  <div class="itemDiv">
                    <div
                      style="
                        width: 12px;
                        height: 12px;
                        border-radius: 6px;
                        margin-top: 6px;
                        background: #f82323;
                      "
                    ></div>
                    <div
                      class="text4"
                      :title="item.key + ':' + item.value"
                      style="font-size: 16px; margin-left: 5px"
                    >
                      {{ item.key }}
                    </div>
                  </div>
                </Col>
              </row>
            </div>
          </TabPane>
          <TabPane :index="4" label="IO信号" name="io" tab="div2">
            <div style="overflow-y: auto; height: 45vh; margin-top: 10px">
              <row>
                <Col span="8" v-for="(item, index) in io" :key="index">
                  <div class="itemDiv">
                    <div
                      class="text1Div"
                      :title="item.key + ':' + item.value"
                      style="font-size: 16px; margin-left: 5px"
                      >{{ item.key }}:
                    </div>
                    <div
                      class="text4"
                      :title="item.key + ':' + item.value"
                      style="font-size: 16px; margin-left: 5px"
                    >
                      {{ item.value }}
                    </div>
                  </div>
                </Col>
              </row>
            </div>
          </TabPane>
          <TabPane :index="5" label="工艺设定" name="process" tab="div2">
            <div style="overflow-y: auto; height: 45vh; margin-top: 10px">
              <row>
                <Col span="8" v-for="(item, index) in process" :key="index">
                  <div class="itemDiv">
                    <div
                      class="text1Div"
                      :title="item.key + ':' + item.value"
                      style="font-size: 16px; margin-left: 5px"
                      >{{ item.key }}:
                    </div>
                    <div
                      class="text4"
                      :title="item.key + ':' + item.value"
                      style="font-size: 16px; margin-left: 5px"
                    >
                      {{ item.value }}
                    </div>
                  </div>
                </Col>
              </row>
            </div>
          </TabPane>
          <TabPane :index="6" label="基础设定" name="settings" tab="div2">
            <div style="overflow-y: auto; height: 45vh; margin-top: 10px">
              <row>
                <Col span="8" v-for="(item, index) in settings" :key="index">
                  <div class="itemDiv">
                    <div
                      class="text1Div"
                      :title="item.key + ':' + item.value"
                      style="font-size: 16px; margin-left: 5px"
                      >{{ item.key }}:
                    </div>
                    <div
                      class="text4"
                      :title="item.key + ':' + item.value"
                      style="font-size: 16px; margin-left: 5px"
                    >
                      {{ item.value }}
                    </div>
                  </div>
                </Col>
              </row>
            </div>
          </TabPane>
          <TabPane :index="7" label="历史状态" name="liShiZhuangTai" tab="div2">
            <div style="overflow-y: auto; height: 45vh">
              <Timeline class="ivu-mt-16">
                <TimelineItem color="blue" v-for="(item, index) in liSiData" :key="index">
                  <div style="display: flex">
                    <p class="shijianZhou" :style="{ color: '#181717' }">{{ item.startTime }}</p>
                    <p
                      class="shijianZhou jianJU1"
                      :style="{ color: item.machineRtType === 1 ? '#e64c17' : '#28297b' }"
                    >
                      {{ item.codeName }}</p
                    >
                    <p
                      class="shijianZhou jianJU2"
                      :style="{ color: item.machineRtType === 1 ? '#e64c17' : '#28297b' }"
                    >
                      持续时间：{{ getDuration(item.duration) }}</p
                    >
                  </div>
                </TimelineItem>
              </Timeline>
              <Divider>
                <Button
                  style="color: #1e93ff"
                  type="text"
                  ghost
                  :loading="loading"
                  @click="jiaZaiGenDuoClick"
                >
                  <span v-if="!loading">加载更多</span>
                  <span v-else>加载中...</span>
                </Button>
              </Divider>
            </div>
          </TabPane>
        </Tabs>
      </div>
      <template v-slot:footer>
        <div> </div>
      </template>
    </Modal>
  </div>
</template>
<script setup lang="ts">
  // import { ref, getCurrentInstance } from 'vue'
  import { ElMessage } from 'element-plus'
  import { zhuanTai } from '@/utils/custom/index'
  import { getDanJiQiangQinLiShi } from '@/api/shengChanJianShi'

  // const { proxy } = getCurrentInstance()
  const spinShow = ref(true)
  const modelShow = ref(false)
  // const hostCraftParas = ref([])
  // const hostFaultParas = ref([])
  // const hostProduceParas = ref([])
  // const setBaseParas = ref([])
  // const setCraftParas = ref([])
  const attrbuteObj: any = ref({})
  const itemValue: any = ref({})
  const divHeight2 = ref('300px')
  const titleString = ref('')
  // const valueKeys = ref([])
  const realtime: any = ref([])
  const warning: any = ref([])
  const io: any = ref([])
  const process: any = ref([])
  const settings: any = ref([])
  const tabname = ref('')
  const pageIndex = ref(0)
  const liSiData: any = ref([])
  const loading = ref(false)

  const tabsClick = (name) => {
    if (name === 'liShiZhuangTai') {
      getDanJiQiangQinLiShiData()
    }
  }

  // 显示右侧抽屉
  // const show = (item) => {
  //   if (valueKeys.value.length === 0) {
  //     valueKeys.value = JSON.parse(localStorage.getItem('valueKeys'))
  //   }
  //   spinShow.value = true
  //   modelShow.value = !modelShow.value
  //   tabname.value = 'JiChu'
  //   itemValue.value = item
  //   // gongXu.value = item.craftNodeName
  //   titleString.value = item.machineTypeName + '-' + item.machineName
  //   // getZongLanShuXin()
  //   getJiTaiXiangQinList()
  // }

  // 历史状态接口
  const getDanJiQiangQinLiShiData = () => {
    let data = {
      machineDocumentId: itemValue.value.id,
      craftNodeId: itemValue.value.craftNodeId,
      pageIndex: pageIndex.value
    }
    loading.value = true
    liSiData.value = []
    getDanJiQiangQinLiShi(data)
      .then((res) => {
        loading.value = false
        liSiData.value = res
      })
      .catch(() => {
        loading.value = false
      })
  }

  // 加载更多
  const jiaZaiGenDuoClick = () => {
    loading.value = true
    pageIndex.value++
    let data = {
      machineDocumentId: itemValue.value.id,
      craftNodeId: itemValue.value.craftNodeId,
      pageIndex: pageIndex.value++
    }
    getDanJiQiangQinLiShi(data)
      .then((res: any) => {
        loading.value = false
        if (res.length !== 0) {
          liSiData.value.push(...res)
        } else {
          ElMessage.warning('暂无更多信息可供加载')
        }
      })
      .catch(() => {
        loading.value = false
      })
  }

  // const getJiTaiXiangQinList = () => {
  //   realtime.value = []
  //   warning.value = []
  //   io.value = []
  //   process.value = []
  //   settings.value = []
  //   attrbuteObj.value = {}
  //   getShishiCanShu_zj(itemValue.value.id)
  //     .then((res) => {
  //       spinShow.value = false
  //       attrbuteObj.value = res.basic
  //       attrbuteObj.value.recordTime =  dayjs(attrbuteObj.value.recordTime)
  //         .format('YYYY-MM-DD HH:mm:ss')
  //       attrbuteObj.value.loomLength =
  //         attrbuteObj.value.loomLength == null
  //           ? ''
  //           : parseFloat(attrbuteObj.value.loomLength).toFixed(2)
  //       if (attrbuteObj.value.runEfc !== null) {
  //         attrbuteObj.value.runEfc = parseFloat(attrbuteObj.value.runEfc).toFixed(2)
  //       }
  //       let caiJiList = valueKeys.value.find((value) => {
  //         return attrbuteObj.value.craftNodeId === value.craftNodeId
  //       }).collectMeta

  //       if (res.machineRealInfo !== null) {
  //         if ('realtime' in res.machineRealInfo) {
  //           let realtime = res.machineRealInfo.realtime
  //           for (let key in realtime) {
  //             let item = caiJiList.find((value) => {
  //               return key.toUpperCase() == value.code && value.isShowWeb === true
  //             })
  //             if (item !== undefined) {
  //               this.realtime.push({
  //                 key: item.name,
  //                 value: realtime[key] + item.magnificationUnit
  //               })
  //             }
  //           }
  //         }
  //         if ('io' in res.machineRealInfo) {
  //           let io = res.machineRealInfo.io
  //           for (let key in io) {
  //             let item = caiJiList.find((value) => {
  //               return key.toUpperCase() == value.code && value.isShowWeb === true
  //             })
  //             if (item !== undefined) {
  //               io.value.push({
  //                 key: item.name,
  //                 value: io[key] + item.magnificationUnit
  //               })
  //             }
  //           }
  //         }
  //         if ('warning' in res.machineRealInfo) {
  //           let warning = res.machineRealInfo.warning
  //           for (let key in warning) {
  //             let item = caiJiList.find((value) => {
  //               return key.toUpperCase() == value.code && value.isShowWeb === true
  //             })
  //             if (item !== undefined) {
  //               warning.value.push({
  //                 key: item.name,
  //                 value: warning[key]
  //               })
  //             }
  //           }
  //         }
  //         if ('process' in res.machineRealInfo) {
  //           let process = res.machineRealInfo.process
  //           for (let key in process) {
  //             let item = caiJiList.find((value) => {
  //               return key.toUpperCase() == value.code && value.isShowWeb === true
  //             })
  //             if (item !== undefined) {
  //               process.value.push({
  //                 key: item.name,
  //                 value: process[key] + item.magnificationUnit
  //               })
  //             }
  //           }
  //         }
  //         if ('settings' in res.machineRealInfo) {
  //           let settings = res.machineRealInfo.settings
  //           for (let key in settings) {
  //             let item = caiJiList.find((value) => {
  //               return key.toUpperCase() == value.code && value.isShowWeb === true
  //             })
  //             if (item !== undefined) {
  //               settings.value.push({
  //                 key: item.name,
  //                 value: settings[key] + item.magnificationUnit
  //               })
  //             }
  //           }
  //         }
  //       }
  //     })
  //     .catch((error) => {
  //       console.log(error)
  //       spinShow.value = false
  //     })
  // }

  // const objKeySort = (arys) => {
  //   //先用Object内置类的keys方法获取要排序对象的属性名，再利用Array原型上的sort方法对获	取的属性名进行排序，newkey是一个数组
  //   var newkey = Object.keys(arys).sort()
  //   // newkey.reverse()
  //   //console.log('newkey='+newkey);
  //   var newObj = {} //创建一个新的对象，用于存放排好序的键值对
  //   for (var i = 0; i < newkey.length; i++) {
  //     //遍历newkey数组
  //     newObj[newkey[i]] = arys[newkey[i]] //向新创建的对象中按照排好的顺序依次增加键值对
  //   }
  //   return newObj //返回排好序的新对象
  // }
  const getDuration = (second) => {
    let minutes = Math.round(second / 1000 / 60)
    let hours = Math.round(minutes / 60)
    let days = Math.round(hours / 24)
    // let months = Math.round(days / 30);
    // let years = Math.round(months / 12);
    // let oldType = ''
    let oldValue: string = ''
    if (days > 0) {
      // 几天前
      // oldType = 'day'
      oldValue = days + '天' + (hours - 24 * days) + '小时' + (minutes - 60 * hours) + '分'
    } else {
      if (hours > 0) {
        // 几小时前
        // oldType = 'hour'
        oldValue = hours + '小时' + (minutes - 60 * hours) + '分'
      } else {
        // 这里  您可以处理一个  刚刚  比如时间小于30分钟
        if (minutes > 0) {
          // 几分钟前
          // oldType = 'minute'
          oldValue = minutes + '分钟'
        } else {
          // 几秒前
          oldValue = '小于1分钟'
        }
      }
    }
    return oldValue
  }
</script>
<style lang="scss">
  .demo-drawer-footer {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    background: #fff;
  }
</style>
